<template>
  <div style="display: flex; align-items: center">
    <a-input
      placeholder="请输入项目名"
      allow-clear
      @pressEnter="onSearch"
      v-model:value="query.keyWord"
      size="small"
      @change="onChange"
    >
      <template #suffix>
        <span
          style="color: rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 18px"
          @click="onSearch"
        >
          <iconfont name="#icon-sousuo" />
        </span>
      </template>
    </a-input>
    <a-button @click="onReset" type="primary"> 重置 </a-button>
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
import InputRound from '@/components/input-round.vue'
import iconfont from '@/components/iconfont.vue'
// import {
//   useQuery,
//   useLoading,
//   useDataSourceManager,
// } from './provide-context.js'
import { ref } from 'vue'
import { message as Message } from 'ant-design-vue'

let query = ref({})
// let { update } = useDataSourceManager()

// let query = useQuery()
// let loading = useLoading()

let activeItem = ref()

function setActiveItem(el) {
  if (el) {
    activeItem.value = el
    activeItem.value.style.backgroundColor = '#dbefff'
    if (activeItem.value.querySelector('.ant-tree'))
      activeItem.value.querySelector('.ant-tree').style.backgroundColor =
        '#dbefff'

    let parentEl = document.querySelector('.catalog-management-project-div')

    let offsetLeft =
      activeItem.value.getBoundingClientRect().left -
      parentEl.getBoundingClientRect().left
    parentEl.scrollLeft = parentEl.scrollLeft + offsetLeft
  }
}

function clearActiveItem() {
  if (activeItem.value) {
    activeItem.value.style.backgroundColor = null
    if (activeItem.value.querySelector('.ant-tree'))
      activeItem.value.querySelector('.ant-tree').style.backgroundColor = '#fff'
    activeItem.value = null
  }
}

function onSearch() {
  if (query.value.keyWord) {
    let targetEl = [
      ...document.querySelectorAll('.catalog-management-project-item-title'),
    ].find(el => (el.textContent || '').includes(query.value.keyWord))

    if (targetEl) {
      let id = targetEl.getAttribute('data-id')
      let itemEl = document.querySelector(
        `.smooth-dnd-draggable-wrapper .itemDiv[data-id='${id}']`,
      )
      if (itemEl) {
        clearActiveItem()
        setActiveItem(itemEl)
        return
      }
    }
    Message.warn(`未匹配到'${query.value.keyWord}'项目`)
  } else {
    clearActiveItem()
  }

  // if (loading.value) return
  // update()
}

/**
 * 重置
 */
function onReset() {
  clearActiveItem()
  // if (loading.value) return
  delete query.value.keyWord
  clearActiveItem()
  // update()
}

/**
 * 清除
 */
function onChange() {
  if (!query.value.keyWord) {
    clearActiveItem()
  }
}
</script>
